<template>
    <view class="content user-content">
		<view v-if="hasLogin" class="person-info person-padding-bottom">
			<view class="person-info-photo">
				<image src="http://erp.bpstech.cn/stuff/image/429042"></image>
				<text>{{ userName }}</text>
			</view>
			<view class="person-info-scan" @click="scanCode">
				<text class="def-icon">&#xe604;</text>
				<text>扫一扫</text>
			</view>
		</view>
        <view class="btn-row">
            <button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button>
            <button v-if="hasLogin" type="default" @tap="bindLogout">退出登录</button>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
        computed: {
            ...mapState(['hasLogin', 'forcedLogin', 'userName'])
        },
        methods: {
            ...mapMutations(['logout']),
			scanCode() {
				// 扫码
				uni.scanCode({
					success: res => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
            bindLogin() {
                uni.navigateTo({
                    url: '../login/login',
                });
            },
            bindLogout() {
                this.logout();
            }
        }
    }
</script>

<style scoped>
.user-content {
	padding: 0;
}	
.person-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #008ff3;
	padding: 10upx 40upx;
}
.person-info-photo {
	height: 100upx;
	line-height: 100upx;
	display: flex;
}
.person-info-photo image {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
}
.person-info-photo text {
	font-size: 30upx;
	margin-left: 30upx;
	color: white;
}
.person-info-scan {
	padding: 0 20upx;
	background-color: #ffffff;
	border-radius: 30upx;
}

.person-info-scan text {
	font-size: 30upx;
	color: #007aff;
}
.person-info-scan text:nth-child(1) {
	padding-right: 20upx;
}
</style>
